<template>
	<CommonModal
		@confirm="forwardEvent"
		@cancel="handleCancel"
		title="转发"
		v-model:visible="innerVisible"
		contentStyle="width: calc(100% - 14px * 2);"
		contentClass="pb-4"
		okText="转发"
	>
		<div class="textAreaBox">
			<textarea class="commentTextArea hideScrollBar" placeholder="输入评论或@朋友" :maxlength="maxlength" v-model="innerValue"></textarea>
			<div class="d-flex leftOperation position-absolute fs-4">
				<AtIcon class="cursor-pointer hover-opacity" width="18" height="18" />
				<HashIcon class="cursor-pointer hover-opacity ms-3" width="18" height="18" />
			</div>
			<div class="inputLengthTips position-absolute">{{ maxlength - innerValue.length }}</div>
		</div>
	</CommonModal>
</template>

<script lang="ts">
import { forwardEventApi } from "@/api/common";
import store from "@/store";
import { AxiosResponseProps } from "@/utils/request";
import { computed, defineComponent, getCurrentInstance, reactive, toRefs } from "vue";
export default defineComponent({
	emits: ["onSuccess", "update:visible", "update:value"],
	props: {
		visible: {
			type: Boolean,
		},
		value: {
			type: String,
		},
		maxlength: {
			type: Number,
			default: 140,
		},
		evId: {
			type: [Number, String],
		},
	},
	setup(props, context) {
		const state = reactive({
			innerVisible: computed({
				get: () => props.visible,
				set: (newV) => context.emit("update:visible", newV),
			}),
			innerValue: computed({
				get: () => props.value,
				set: (newV) => context.emit("update:value", newV),
			}),
			userInfo: computed(() => store.state.userInfo),
		});
		const {
			appContext: {
				config: {
					globalProperties: { $toast },
				},
			},
		} = getCurrentInstance();
		const forwardEvent = () => {
			if (!state.innerValue) return $toast.warn("评论内容不能为空");
			forwardEventApi({
				uid: (state.userInfo as { userId: number }).userId,
				evId: props.evId as string | number,
				forwards: state.innerValue as string,
			}).then((res: AxiosResponseProps) => {
				if (res.code === 200) {
					$toast.success("转发成功");
					context.emit("onSuccess");
					state.innerVisible = false;
					state.innerValue = "";
				} else {
					$toast.error(res.message || "转发失败");
				}
			});
		};
		const handleCancel = () => {
			state.innerValue = "";
		};
		return {
			...toRefs(state),
			forwardEvent,
			handleCancel,
		};
	},
});
</script>

<style scoped lang="scss">
.textAreaBox {
	border-radius: 6px;
	position: relative;
	height: 130px;
	background-color: #fff;
	border: 1px solid rgb(212, 212, 212);
	.commentTextArea {
		padding-top: 4px;
		border: none;
		width: calc(100% - 34px);
		height: 98px;
		border-radius: 6px;
		vertical-align: top;
		outline: none;
		text-indent: 6px;
		resize: none;
		font-size: 13px;
		&::placeholder {
			color: rgba($color: #ccc, $alpha: 1);
		}
	}
	.leftOperation {
		left: 12px;
		bottom: 8px;
	}
	.inputLengthTips {
		color: #ccc;
		right: 12px;
		bottom: 6px;
	}
}
</style>
